<template>
	<view class="login">
		<mine-head title="" backIconColor="#fff" :background="background" titleColor="#fff" :borderBottom="false"></mine-head>
		<!-- <view class="back">
			<image @click="back" src="@/static/img/common/topBack.png" alt="" />
		</view> -->
		<view class="con">
			<view class="title">
				输入验证码
			</view>
			<!-- <u-code-input 
				v-model="code" 
				:focus="true" 
				mode="box" 
				:space="60" 
				fontSize="36"
				:maxlength="4"
				size="100"
				class="code-input"
				hairline>
			</u-code-input> -->
			<u-message-input 
				:maxlength="4"
				:focus="true"
				v-model="form.code" 
				@change="change" 
				@finish="finish"
				style="margin-bottom: 60rpx;"
			>
			</u-message-input>
			<view class="btn" @click="loginFn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',
				isChecked:false,
				checked:[],
				background:{
					backgroundColor: 'transparent'
				},
				form:{
					phone:'',
					code:''
				},
				phone:'',
				isShowPop:false,
				serviceTerms:'',
				privacyPolicy:'',
				popType:1
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			console.log(options)
			if(options.phone){
				this.form.phone = options.phone
				this.phone = options.phone
			}
		},
		methods:{
			back(){
				uni.navigateBack(-1)
			},
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.form.code = e
			},
			getCode(){
				uni.navigateTo({
					url:'/pages/login/code'
				})
			},
			pickerFn(e){
				this.tel = e.value[0]
				this.show = false
			},
			pickerCancel(){
				
			},
			getPhone(){
				
			},
			checkboxChange(e){
				console.log(e)
			},
			popShow(e){
				this.isShowPop = true
				if(e==1){
					this.popType = 1
				}else{
					this.popType = 2
				}
			},
			closePop(){
				this.isShowPop = false
			},
			loginFn() {
				let that = this;
				uni.$_post({
					url: "checkCode",
					that: that,
					params: that.form,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							that.editUser()
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			editUser(){
				let that = this;
				let p = {
					phone:this.form.phone
				}
				uni.$_post({
					url: "edit-user",
					that: that,
					params: p,
					success(res) {
						let _data = res.data;
						if (res.code == 0) {
							uni.showToast({
								title: '绑定成功！请重新登录',
								duration: 2000,
								icon:'none'
							});
							uni.removeStorage({
								key: 'token',
								success: function(res) {
										
								}
							});
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/login/login'
								})
							},2000)
						}
							
					},
					fail(err) {
							
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-checkbox__icon-wrap{
		border: 1px solid #adadad;
	}
	/deep/.uni-input-input{
		font-size: 32rpx;
	}
	/deep/.u-back-wrap{
		background: url(@/static/img/common/topBack.png) no-repeat center / 40rpx 40rpx;
	}
	.login{
		width: 100%;
		height: 100vh;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		background: url(@/static/img/index/login_bg.png) no-repeat center / cover;
		.con{
			padding: 0 50rpx;
			
			
		}
		.bottom{
			// position: absolute;
			// bottom: 60rpx;
			// left: 0;
			// width: 100%;
			z-index: 2;
			padding: 30rpx 0;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #999;
			.span1{
				color: #5A64C5;
			}
		}
		.back{
			margin-bottom: 70rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.title{
			font-size: 64rpx;
			font-family: $uni-font-family-Heavy;
			text-align: left;
			color: #111111;
			margin-bottom: 100rpx;
		}
		.code-input{
			margin-bottom: 50rpx;
		}
		/deep/.u-char-item{
			border: none !important;
			background-color: #fff;
			border-radius: 20rpx;
			width: 100rpx !important;
			height: 100rpx !important;
			margin: 0 20rpx;
		}
		.btn{
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			background: #5a64c5;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: $uni-font-family-Medium;
			text-align: center;
			color: #ffffff;
			margin-bottom: 40rpx;
		}
		.txt{
			font-size: 24rpx;
			font-family: $uni-font-family-Medium;
			text-align: center;
			color: #999;
		}
		.popBtn{
			height: 100rpx;
			line-height: 100rpx;
			background: #5a64c5;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
			margin: 30rpx;
		}
	}
	.popCon{
		padding: 50rpx 30rpx;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
			margin: 0 0 20rpx 0;
			text-align: center;
		}
	}
</style>
